<template>
  <van-cell center :title="label">
    <template #right-icon>
      <van-switch
        v-bind="$attrs"
        v-on="$listeners"
        size="20"
        active-color="#ec6616"
        :value="value"
        @change="handleChange"
      />
    </template>
  </van-cell>
</template>

<script>
export default {
  name: 'qt-switch',

  props: {
    label: {
      type: String,
      required: true,
    },

    fieldName: {
      type: String,
      required: true,
    },

    value: Boolean,
  },

  methods: {
    handleChange(value) {
      this.$emit('input', value, this.fieldName);
      this.$emit('change', value, this.fieldName);
    },
  },
};
</script>
